<template>
    <div>
      <div class="permission-search">
        <Input placeholder="请输入权限名" style="width: 300px" clearable autofocus v-model="formData.searchName"></Input>
        <Button type="info" style="margin-left:10px" @click="searchPermission(0,10,formData.searchName)">查询</Button>
        <Button type="error" style="margin-left:10px" >清空</Button>
      </div>
      <div class="permission-add-batchDelete">
        <Button type="primary" style="margin-left: 10px" @click="addModalShow">新增权限</Button>
        <Modal v-model="modal.addModal" title="新增权限" @on-ok="addPermission" @on-cancel="resetFormData">
          <Row style="font-size:15px":gutter="5">
            <Col span="4" style="text-align: center;line-height: 35px">权限名：</Col>
            <Col span="8">
              <Input placeholder="权限名" clearable v-model="formData.permissionName"></Input>
            </Col>
          </Row>
          <br>
          <Row style="font-size:15px":gutter="5">
            <Col span="4" style="text-align: center;line-height: 35px">权限描述：</Col>
            <Col span="8">
              <Input placeholder="权限描述" clearable v-model="formData.description"></Input>
            </Col>
          </Row>
          <br>
          <Row style="font-size:15px":gutter="5">
            <Col span="4" style="text-align: center;line-height: 35px">访问路径：</Col>
            <Col span="8">
              <Input placeholder="访问路径" clearable v-model="formData.permissionUrl"></Input>
            </Col>
          </Row>
        </Modal>
        <Button type="error" style="margin-left: 10px" @click="batchDeletePermissions">批量删除</Button>
      </div>
      <Divider>权限列表</Divider>
      <div style="padding: 50px">
        <Table max-height="600" stripe border :columns="this.columns" :data="respData.data" ref="selection" @on-selection-change="getSelectList">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="success" style="margin-right: 5px" @click="editModalShow(index)">编辑</Button>
            <Modal v-model="modal.editModal" title="编辑权限" @on-ok="editPermission" @on-cancel="resetFormData">
              <Row style="font-size:15px":gutter="5">
                <Col span="4" style="text-align: center;line-height: 35px">权限名：</Col>
                <Col span="8">
                  <Input placeholder="权限名" clearable v-model="formData.permissionName"></Input>
                </Col>
              </Row>
              <br>
              <Row style="font-size:15px":gutter="5">
                <Col span="4" style="text-align: center;line-height: 35px">权限描述：</Col>
                <Col span="8">
                  <Input placeholder="权限描述" clearable v-model="formData.description"></Input>
                </Col>
              </Row>
              <br>
              <Row style="font-size:15px":gutter="5">
                <Col span="4" style="text-align: center;line-height: 35px">访问路径：</Col>
                <Col span="8">
                  <Input placeholder="访问路径" clearable v-model="formData.permissionUrl"></Input>
                </Col>
              </Row>
            </Modal>
          </template>
        </Table>
        <Page :total="respData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
              @on-page-size-change="getPageCount" style="margin-top: 50px"></Page>
      </div>
    </div>
</template>

<script>
    import PermissionService from "../services/PermissionService";
    import AuthPermissionService from "../services/AuthPermissionService";
    export default {
        name: "PermissionManageComponent",
      data() {
        return {
          PermissionService:null,
          authPermissionService:null,
          formData:{
            searchName:"",
            permissionName:"",
            description: "",
            permissionUrl:"",
            currentPage: 0,
            pageCount: 10,
            permissionId:"",
            selectedPermissions:[]
          },
          modal:{
            addModal:false,
            editModal:false
          },
          columns: [
            {
              type: "selection",
              width: 60,
              align: "center"
            },
            {
              title: "权限名称",
              key: "permissionName",
              align: "center"
            },
            {
              title: "描述",
              key: "description",
              align: "center"
            },
            {
              title: "访问路径",
              key: "permissionUrl",
              align: "center"
            },
            {
              title: "创建时间",
              key: "createTime",
              align: "center"
            },
            {
              title: "操作",
              slot: "action",
              align: "center"
            }
          ],
          respData: {data:[], total:null},
        }
      },
      created(){
        this.init();
      },
      methods: {
        init(){
          this.permissionService = new PermissionService(this);
          this.authPermissionService = new AuthPermissionService(this);
          this.authPermissionService.permissionAuth(function (_this, result) {
            if(result == false){
              _this.$router.push({path:'/noAuth'}) ;
            }
          });
          this.searchPermission(0,10,'');
        },
        searchPermission(currentPage, pageCount, permissionName){
          let params = {
            "currentPage": currentPage + "",
            "pageCount": pageCount + "",
            "permissionName" : permissionName + ""
          };
          this.permissionService.searchPermission(params, function (_this, data) {
            _this.respData.data = data.data;
            _this.respData.total = data.page.total;
          });
        },
        addPermission(){
          let params = {
            "permissionName": this.formData.permissionName,
            "description": this.formData.description,
            "permissionUrl": this.formData.permissionUrl
          };
          this.permissionService.addPermission(params);
        },
        editPermission(){
          let params = {
            "id": this.formData.permissionId,
            "permissionName": this.formData.permissionName,
            "description": this.formData.description,
            "permissionUrl": this.formData.permissionUrl
          };
          this.permissionService.editPermission(params);
        },
        batchDeletePermissions(){
          let selectedIds = [];
          this.formData.selectedPermissions.forEach(function (permission) {
            selectedIds.push(permission.id);
          })
          // console.log(selectedIds);
          this.permissionService.batchDeletePermissions(selectedIds);
        },
        addModalShow(){
          this.modal.addModal=true;
        },
        editModalShow(index){
          this.formData.permissionName = this.respData.data[index].permissionName;
          this.formData.description = this.respData.data[index].description;
          this.formData.permissionId = this.respData.data[index].id;
          this.formData.permissionUrl = this.respData.data[index].permissionUrl;
          // console.log(this.formData.roleId);
          this.modal.editModal=true;
        },
        resetFormData(){
          this.formData.searchName = "";
          this.formData.permissionName = "";
          this.formData.description = "";
          this.formData.permissionUrl = "";
        },
        getCurrentPage(num){
          this.formData.currentPage = num-1;
          this.searchPermission(this.formData.currentPage, this.formData.pageCount, this.formData.permissionName);
        },
        getPageCount(pageSize){
          this.formData.pageCount = pageSize;
          this.searchPermission(this.formData.currentPage, this.formData.pageCount, this.formData.permissionName);
        },
        getSelectList(selection){
          this.formData.selectedPermissions = selection;
        }
      }
    }
</script>

<style scoped>
  .permission-search {
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
  }
  .permission-add-batchDelete {
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
  }
</style>
